<template>
  <div class="box">
    <h1>热门圈子</h1>
    <ul>
      <li
        v-for="items in cicleslistdata"
        :key="items.id"
        @click="goDetail(items.id)"
      >
        <img :src="items.img" />
        <h5>{{ items.title }}</h5>
        <p>{{ items.des }}</p>
        <input type="button" value="+加入" />
      </li>
    </ul>
    <div class="jion">
      <input type="button" value="一键加入" />
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "Remen",
  data() {
    return {
      cicleslist: [],
    };
  },
  // created() {
  //   axios({
  //     url: "/cicleslist",
  //   }).then((res) => (this.cicleslist = res.data));
  // },


  created() {
    this.$store.dispatch("LINK_REMEN_DATA","/com/cicleslist")
    },
    computed:{
      cicleslistdata(){
        return this.$store.state.ComReMenM.cicleslist
      }
   },

  methods: {
    goDetail(itemsid) {
      console.log(itemsid);
      // localStorage.setItem("itemsid")
      this.$router.push(`/Xiangqin/?id=${itemsid}`);
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 4.7rem;
  padding: 0 0.16rem;
  box-sizing: border-box;
  padding: 0.14rem;
}
.box h1 {
  font-size: 0.2rem;
}
.box ul {
  width: 100%;
  height: 3.36rem;
  margin-top: 0.14rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.box ul li {
  width: 32%;
  height: 46%;
  text-align: center;
  padding-top: 0.08rem;
  border-radius: 0.1rem;
  border: 0.01rem solid silver;
}
.box ul li img {
  border-radius: 50%;
  width: 0.54rem;
  height: 0.54rem;
}
.box ul li input {
  width: 0.7rem;
  height: 0.36rem;
  border: 0.01rem solid #01c9af;
  border-radius: 0.2rem;
  color: #01c9af;
  text-align: center;
  line-height: 0.36rem;
}
.box ul li h5 {
  font-size: 0.14rem;
}
.box ul li p {
  font-size: 0.12rem;
  color: #707178;
  margin-bottom: 0.07rem;
}
.box .jion {
  width: 100%;
  height: 0.85rem;
  text-align: center;
  line-height: 0.85rem;
}
.box .jion input {
  width: 2.1rem;
  height: 0.46rem;
  background-color: #2ef3d8;
  border-radius: 0.2rem;
  font-size: 0.16rem;
  text-align: center;
  font-weight: bold;
  margin-top: 0.1rem;
  line-height: 0.46rem;
  border: 0;
}
</style>
